<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
      <el-form-item label="客户名称" prop="purchaserName">
        <el-input v-model="queryParams.purchaserName" placeholder="请输入客户名称" clearable
          style="width: 240px" @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="客户编号" prop="businessCode">
        <el-input v-model="queryParams.businessCode" placeholder="请输入客户编号" clearable
          style="width: 240px" @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="发票抬头" prop="receiptTitle">
        <el-input v-model="queryParams.receiptTitle" placeholder="请输入发票抬头" clearable
          style="width: 240px" @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="税号" prop="taxpayerNo">
        <el-input v-model="queryParams.taxpayerNo" placeholder="请输入税号" clearable
          style="width: 240px" @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="发票类型" prop="type">
        <el-select v-model="queryParams.type" placeholder="发票类型" clearable style="width: 240px">
          <el-option v-for="dict in dict.type.invoice_type" :key="dict.value"
            :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="发票状态" prop="invoiceStatus">
        <el-select v-model="queryParams.invoiceStatus" placeholder="发票状态" clearable style="width: 240px">
          <el-option v-for="dict in dict.type.invoice_status" :key="dict.value"
            :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="申请时间">
        <el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd"
          type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索
        </el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
          @click="handleDelete" v-hasPermi="['trade:order:receipt:invalid:edit']">删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
          v-hasPermi="['trade:order:receipt:export']">导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
    </el-row>

    <el-table border v-loading="loading" :data="receipts" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column :label="columns[0].label" :prop="columns[0].prop" :width="columns[0].width"
        v-if="columns[0].visible" :show-overflow-tooltip="true" />
      <el-table-column :label="columns[1].label" :prop="columns[1].prop" :width="columns[1].width"
        v-if="columns[1].visible" :show-overflow-tooltip="true" />
      <el-table-column :label="columns[2].label" :prop="columns[2].prop" :width="columns[2].width"
        v-if="columns[2].visible" :show-overflow-tooltip="true" />
      <el-table-column :label="columns[3].label" :prop="columns[3].prop" :width="columns[3].width"
        v-if="columns[3].visible" :show-overflow-tooltip="true" />
      <el-table-column :label="columns[4].label" :prop="columns[4].prop" :width="columns[4].width"
        v-if="columns[4].visible" :show-overflow-tooltip="true" />
      <el-table-column :label="columns[5].label" :prop="columns[5].prop" :width="columns[5].width"
        v-if="columns[5].visible" :show-overflow-tooltip="true" />
      <el-table-column :label="columns[6].label" :prop="columns[6].prop" :width="columns[6].width"
        v-if="columns[6].visible" :show-overflow-tooltip="true" />
      <el-table-column :label="columns[7].label" :prop="columns[7].prop" :width="columns[7].width"
        v-if="columns[7].visible" :show-overflow-tooltip="true" />
      <el-table-column :label="columns[8].label" :prop="columns[8].prop" :width="columns[8].width"
        v-if="columns[8].visible" :show-overflow-tooltip="true" />
      <el-table-column :label="columns[9].label" :prop="columns[9].prop" :width="columns[9].width"
        v-if="columns[9].visible" :show-overflow-tooltip="true" />
      <el-table-column :label="columns[10].label" align="center" :width="columns[10].width">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.invoice_type" :value="scope.row.type" />
        </template>
      </el-table-column>
      <el-table-column :label="columns[11].label" align="center" :width="columns[11].width">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.invoice_status" :value="scope.row.receiptStatus" />
        </template>
      </el-table-column>
      <el-table-column :label="columns[12].label" :prop="columns[12].prop" :width="columns[12].width"
        v-if="columns[12].visible" :show-overflow-tooltip="true" />
      <el-table-column :label="columns[13].label" :prop="columns[13].prop" :width="columns[13].width"
        v-if="columns[13].visible" :show-overflow-tooltip="true" />
      <el-table-column :label="columns[14].label" :prop="columns[14].prop" :width="columns[14].width"
        v-if="columns[14].visible" :show-overflow-tooltip="true" />
      <el-table-column :label="columns[15].label" :prop="columns[15].prop" :width="columns[15].width"
        v-if="columns[15].visible" :show-overflow-tooltip="true" />
      <el-table-column :label="columns[16].label" :prop="columns[16].prop" :width="columns[16].width"
        v-if="columns[16].visible" :show-overflow-tooltip="true" />
      <el-table-column :label="columns[17].label" align="center" :prop="columns[17].prop" :show-overflow-tooltip="true" width="150">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="120" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="openReviewView(scope.row)"
            v-if="scope.row.receiptStatus == 'NEW'"
            v-hasPermi="['trade:order:receipt:receiptStatus:invoicing']">审核</el-button>
          <el-button size="mini" type="text" icon="el-icon-edit" @click="reissuingConfirm(scope.row)"
            v-if="scope.row.receiptStatus == 'REISSUING'"
            v-hasPermi="['trade:order:receipt:receiptStatus:review']">冲红</el-button>
          <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)">
            <span class="el-dropdown-link">
              <i class="el-icon-d-arrow-right el-icon--right"></i>更多
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="handleViewOrderSn" icon="el-icon-circle-check">查看订单</el-dropdown-item>
              <el-dropdown-item command="handleViewInvoice" icon="el-icon-circle-check"
                v-if="scope.row.url">查看发票</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize" @pagination="getList" />

    <!-- 审核开票信息对话框 -->
    <el-dialog v-dialogDragWidth v-dialogDragHeight v-dialogDrag :title="title" :visible.sync="open" width="900px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="发票类型" prop="type">
                <el-radio-group v-model="form.type">
                  <el-radio
                    v-for="dict in dict.type.invoice_type"
                    :key="dict.value"
                    :label="dict.value"
                  >{{dict.label}}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="开票金额" prop="receiptPrice">
                <el-input-number v-model="form.receiptPrice" placeholder="请输入开票金额" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-col :span="12">
            <el-form-item label="发票抬头" prop="receiptTitle">
              <el-input v-model="form.receiptTitle" placeholder="请输入发票抬头" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="税号" prop="taxpayerNo">
              <el-input v-model="form.taxpayerNo" placeholder="请输入税号" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="税票地址">
              <el-input v-model="form.taxpayerAddress" type="taxpayerAddress" placeholder="请输入税票地址和电话"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="开户银行" prop="bankName">
              <el-input v-model="form.bankName" placeholder="请输入开户银行名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="银行卡号" prop="bankCardNo">
              <el-input v-model="form.bankCardNo" placeholder="请输入银行卡号" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="联系电话" prop="mobile">
              <el-input v-model="form.mobile" placeholder="请输入联系电话" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="form.email" placeholder="请输入邮箱地址" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="订单编号">
              <el-input v-model="form.orderSn" type="textarea" placeholder="请输入发票编号"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="审核状态" prop="receiptStatus">
              <el-radio-group v-model="form.receiptStatus">
                <el-radio key="INVOICING" label="INVOICING" v-model="form.receiptStatus" >同意</el-radio>
                <el-radio key="REFUSE" label="REFUSE" v-model="form.receiptStatus">拒绝</el-radio>
                <el-radio key="INVALID" label="INVALID" v-model="form.receiptStatus">作废</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="审核意见" prop="reviewComment">
              <el-input v-model="form.reviewComment" placeholder="请输入审核意见" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitInvoicing">提 交</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 查看 订单编号 -->
    <el-dialog v-dialogDragWidth v-dialogDragHeight v-dialogDrag :visible.sync="orderSnView" width="300px">
      <el-table :data="orderSnArray" border>
        <el-table-column prop="orderSn" label="订单编号" align="center"></el-table-column>
      </el-table>
    </el-dialog>

  </div>
</template>

<script>
import {receiptList, invoicing, review} from "@/api/order/receipt";

export default {
  name: "Receipt",
  dicts: ["invoice_type", "invoice_status"],
  data () {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 发票表格数据
      receipts: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 日期范围
      dateRange: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        receiptTitle: [
          { required: true, message: "发票抬头不能为空", trigger: "blur" },
        ],
        taxpayerNo: [
          { required: true, message: "税号不能为空", trigger: "blur" },
        ],
      },
      // 列信息
      columns: [
        { key: 0, label: `申请编号`, prop: "sn", width: 175, visible: true },
        { key: 1, label: `申请ID`, prop: "id", width: 173, visible: false },
        { key: 2, label: `客户名称`, prop: "purchaserName", width: 210, minWidth: 200, visible: true },
        { key: 3, label: `客户编号`, prop: "businessCode", width: 80, visible: true },
        { key: 4, label: `发票抬头`, prop: "receiptTitle", width: 150, visible: true },
        { key: 5, label: `税号`, prop: "taxpayerNo", width: 180, visible: true },
        { key: 6, label: `税票地址`, prop: "taxpayerAddress", width: 200, visible: false },
        { key: 7, label: `开户银行`, prop: "bankName", width: 180, visible: false },
        { key: 8, label: `银行卡号`, prop: "bankCardNo", width: 180, visible: false },
        { key: 9, label: `发票金额`, prop: "receiptPrice", width: 80, visible: true },
        { key: 10, label: `发票类型`, prop: "type", width: 120, visible: true },
        { key: 11, label: `状态`, prop: "receiptStatus", width: 80, visible: true },
        { key: 12, label: `联系电话`, prop: "mobile", width: 100, visible: false },
        { key: 13, label: `邮箱`, prop: "email", width: 100, visible: false },
        { key: 14, label: `备注`, prop: "remark", width: 150, visible: true },
        { key: 15, label: `订单编号`, prop: "orderSn", width: 200, visible: true },
        { key: 16, label: `审核意见`, prop: "reviewComment", width: 200, visible: false },
        { key: 17, label: `申请时间`, prop: "createTime", width: 75, visible: true },
      ],
      orderSnView: false,
      orderSnArray: [],
    };
  },
  created () {
    this.getList();
  },
  methods: {
    /** 查询角色列表 */
    getList () {
      this.loading = true;
      receiptList(this.addDateRange(this.queryParams, this.dateRange)).then(
        (response) => {
          this.receipts = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      );
    },
    // 取消按钮
    cancel () {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset () {
      if (this.$refs.menu != undefined) {
        this.$refs.menu.setCheckedKeys([]);
      }
        (this.form = {
          receiptTitle: undefined,
          taxpayerNo: undefined,
          taxpayerAddress: undefined,
          bankName: undefined,
          bankCardNo: undefined,
          mobile: undefined,
          email: undefined,
          receiptPrice: undefined,
          remark: undefined,
          type: undefined,
          orderSn: undefined,
        });
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery () {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery () {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange (selection) {
      this.ids = selection.map((item) => item.roleId);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    // 更多操作触发
    handleCommand (command, row) {
      switch (command) {
        case "handleViewOrderSn":
          this.handleViewOrderSn(row);
          break;
        case "handleViewInvoice":
          this.handleViewInvoice(row);
          break;
        case "handleAuthUser":
          this.handleAuthUser(row);
          break;
        default:
          break;
      }
    },
    handleViewOrderSn(row){
      this.orderSnArray = []
      for(let orderSn of row.orderSn.split(',')){
        this.orderSnArray.push({orderSn: orderSn})
      }

      this.orderSnView = true
    },
    handleViewInvoice(row){
      console.log(row.orderSn)
    },
    /** 打开审核窗口 */
    openReviewView (row) {
      this.reset();
      this.open = true;
      this.form = { ...row };
      this.form.receiptStatus = 'INVOICING';
      this.title = "审核开票信息";
    },
    /** 提交开票信息 */
    submitInvoicing(){
      const _this = this
      if('INVOICING' == _this.form.receiptStatus){
        this.$modal.confirm('确认提交开票信息吗？')
        .then(function () {
          invoicing(_this.form.id, _this.form).then(res=>{
            _this.open = false;
            _this.$modal.msgSuccess("提交开票信息成功");
            _this.getList();
          });
        })
      } else {
        console.log(this.form)
        this.$modal.confirm('确认提交审核信息吗？')
        .then(function () {
          review(_this.form.id, {receiptStatus: _this.form.receiptStatus, reviewComment: _this.form.reviewComment}).then(res=>{
            _this.$modal.msgSuccess("审核成功");
            _this.open = false;
            _this.getList();
          })
        })
      }
    },
    /** 冲红确认 */
    reissuingConfirm(row){
      const _this = this
      this.$modal.confirm('请确认发票已经冲红成功了吗？')
      .then(function () {
        review(row.id, {receiptStatus: "REISSUE"}).then(res=>{
          _this.$modal.msgSuccess("冲红成功");
          _this.getList();
        })
      })
    },
    /** 导出按钮操作 */
    handleExport () {
      this.download(
        "system/role/export",
        {
          ...this.queryParams,
        },
        `role_${new Date().getTime()}.xlsx`
      );
    },
  },
};
</script>
